import uCharts from "@qiun/ucharts";

Page<
  {},
  {
    getServerData: () => void;
    drawCharts: (id: string, chartData: any) => void;
    tap: (e: WechatMiniprogram.TouchEvent) => void;
    uChartsInstance?: uCharts;
  }
>({
  /**
   * 页面的初始数据
   */
  data: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    //这里的第一个 750 对应 css .charts 的 width
    const cWidth = (750 / 750) * wx.getSystemInfoSync().windowWidth;
    //这里的 500 对应 css .charts 的 height
    const cHeight = (500 / 750) * wx.getSystemInfoSync().windowWidth;
    this.setData({ cWidth, cHeight });
    this.getServerData();
  },
  getServerData() {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
        series: [
          {
            name: "目标值",
            data: [35, 36, 31, 33, 13, 34],
          },
          {
            name: "完成量",
            data: [18, 27, 21, 24, 6, 28],
          },
        ],
      };
      this.drawCharts("column", res);
    }, 500);
  },
  drawCharts(id: string, chartData: any) {
    wx.createSelectorQuery()
      .select(`#${id}`) // 在 WXML 中填入的 id
      .fields({ node: true, size: true })
      .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node;
        // Canvas 画布的实际绘制宽高
        const renderWidth = res[0].width;
        const renderHeight = res[0].height;
        // Canvas 绘制上下文
        const context = canvas.getContext("2d");

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio;
        console.log(renderWidth, renderHeight);
        const canvasWidth = renderWidth * dpr;
        const canvasHeight = renderHeight * dpr;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        context.scale(dpr, dpr);

        // //这里的第一个 750 对应 css .charts 的 width
        // const cWidth = rpx2px(750);
        // console.log(renderWidth, cWidth);
        // //这里的 500 对应 css .charts 的 height
        // const cHeight = rpx2px(500);
        // console.log(renderHeight, cHeight);

        this.uChartsInstance = new uCharts({
          type: "column",
          context: context,
          width: renderWidth,
          height: renderHeight,
          categories: chartData.categories,
          series: chartData.series,
          animation: true,
          background: "#FFFFFF",
          padding: [15, 15, 0, 5],
          xAxis: {
            disableGrid: true,
          },
          yAxis: {
            data: [{ min: 0 }],
          },
          extra: {
            column: {
              type: "group",
            },
          },
        });
      });
  },
  tap(e: WechatMiniprogram.TouchEvent) {
    if (this.uChartsInstance) {
      this.uChartsInstance.touchLegend(e);
      this.uChartsInstance.showToolTip(e);
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
});
